import styles from './index.less';
import { history, Link, useIntl } from 'umi';
import { Form, Input, Button, Select, message, Row, Col } from 'antd';
import request from '@/utils/request';
import { sourcesfn } from '@/data/options';
const { Option } = Select;

const onFinish = (values: any) => {
  console.log('Success:', values);
  request
    .post('/user/register', values)
    .then((res: any) => {
      message.success(res.message);
      history.replace('/login');
    })
    .catch((err) => {
      message.error(err.message);
    });
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const RegisterPage = function () {
  const intl = useIntl();

  const sources = sourcesfn();

  return (
    <div className={styles.registerContainer}>
      <div className={styles.registerTitle}>
        {intl.formatMessage({ id: 'register' })}
      </div>
      <Form
        layout="vertical"
        initialValues={{ registeredChannels: 1 }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        className={styles.registerForm}
      >
        <Row gutter={30}>
          <Col span={12}>
            <Form.Item
              label={intl.formatMessage({ id: 'firstname' })}
              name="name"
              rules={[
                {
                  required: true,
                  message: intl.formatMessage({ id: 'p_e_u_firstname' }),
                },
              ]}
            >
              <Input
                placeholder={intl.formatMessage({ id: 'enterfirstname' })}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label={intl.formatMessage({ id: 'lastname' })}
              name="lastName"
              rules={[
                {
                  required: true,
                  message: intl.formatMessage({ id: 'p_e_u_lastname' }),
                },
              ]}
            >
              <Input
                placeholder={intl.formatMessage({ id: 'enterlastname' })}
              />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item
          label={intl.formatMessage({ id: 'email' })}
          name="email"
          rules={[
            {
              type: 'email',
              message: intl.formatMessage({ id: 'pleaseinputthecorrectemail' }),
            },
            {
              required: true,
              message: intl.formatMessage({ id: 'pleaseinputyouremail' }),
            },
          ]}
        >
          <Input placeholder={intl.formatMessage({ id: 'enteremail' })} />
        </Form.Item>

        <Form.Item
          label={intl.formatMessage({ id: 'password' })}
          name="password"
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'pleaseinputyourpassword' }),
            },
          ]}
        >
          <Input.Password
            placeholder={intl.formatMessage({ id: 'pleaseinputyourpassword' })}
          />
        </Form.Item>
        <Form.Item
          label={intl.formatMessage({ id: 'campanyname' })}
          name="camanpayName"
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'pleaseinputyourcamanpayname',
              }),
            },
          ]}
        >
          <Input placeholder={intl.formatMessage({ id: 'entercompanyname' })} />
        </Form.Item>
        <Form.Item
          label={intl.formatMessage({ id: 'phonenumber' })}
          name="phone"
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'pleaseinputyourphonenumber' }),
            },
          ]}
        >
          <Input placeholder={intl.formatMessage({ id: 'enterphonenumber' })} />
        </Form.Item>
        <Form.Item
          label={intl.formatMessage({ id: 'howdiduhearaboutus' })}
          name="registeredChannels"
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'pleaseselectthesource' }),
            },
          ]}
        >
          <Select style={{ width: '100%' }}>
            {sources.map((item) => (
              <Option key={item.value} value={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        {/* <Form.Item
          label={intl.formatMessage({ id: 'referralcode_optional' })}
          name="referralCode"
        >
          <Input />
        </Form.Item> */}
        <Form.Item>
          <Button type="primary" block htmlType="submit">
            {intl.formatMessage({ id: 'register' })}
          </Button>
          <div className={styles.reg}>
            {intl.formatMessage({ id: 'haveanaccount' })}
            <Link to="/login">{intl.formatMessage({ id: 'login' })}</Link>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
};

export default RegisterPage;
